<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">网站标题</label>
        <el-input v-model="query.title" clearable placeholder="标题" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="60%">
        <el-row :gutter="20">
          <el-col :span="15">
            <el-button type="info" icon="el-icon-refresh-right" @click="form={}">重置</el-button>
            <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">

              <el-form-item label="网站语言" prop="language">
                <el-radio v-for="item in dict.language" :key="item.id" v-model="form.language" :label="item.value">{{ item.label }}</el-radio>
              </el-form-item>
               <el-form-item label="网站域名" prop="host">
                <el-input v-model="form.host" class="fromselect" clearable />
              </el-form-item>
              <el-form-item label="网站标题" prop="title">
                <el-input v-model="form.title" class="fromselect" clearable />
              </el-form-item>
              <el-form-item label="产品标题" prop="productTitle">
                <el-input v-model="form.productTitle" class="fromselect" clearable />
              </el-form-item>

              <el-form-item label="消息标题" prop="messageTitle">
                <el-input v-model="form.messageTitle" class="fromselect" clearable />
              </el-form-item>
              <el-form-item label="logo" prop="logo">
                <el-select placeholder="请选择" v-model="form.logo" value-key="id" @change="showImage" class="fromselect" clearable>
                  <el-option v-for="(item,index) in logoSettings" :key="item.id" filterable :label="item.title" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="轮播图" prop="swiperSettingList">
                <el-select class="fromselect" v-model="form.swiperSettingList" placeholder="请选择" value-key="id" clearable multiple filterable :multiple-limit="4" @change="showMultipleImage">
                  <el-option v-for="item in swiperSettings" :key="item.id" :label="item.title" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="视频内容" prop="videoSetting">
                <el-select class="fromselect" v-model="form.videoSetting" placeholder="请选择" value-key="id" clearable filterable @change="showVideo">
                  <el-option v-for="item in videoSettings" :key="item.id" :label="item.title" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="产品列表" prop="productSettingList">
                <el-select class="fromselect" v-model="form.productSettingList" placeholder="请选择" value-key="id" clearable multiple filterable  @change="showMultipleImage">
                  <el-option v-for="item in productSettings" :key="item.id" :label="item.title" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="最新消息" prop="messageSettingList">
                <el-select class="fromselect" v-model="form.messageSettingList" placeholder="请选择" value-key="id" clearable multiple filterable :multiple-limit="4" @change="showMultipleImage">
                  <el-option v-for="item in messageSettings" :key="item.id" :label="item.title" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="尾部列表" prop="tailModuleList">
                <el-select class="fromselect" v-model="form.tailModuleList" placeholder="请选择" value-key="title" clearable multiple filterable :multiple-limit="4" @change="showMultipleImage">
                  <el-option v-for="item in tailSettings" :key="item.title" :label="item.title" :value="item" />
                </el-select>
              </el-form-item>
              <el-form-item label="版权信息" prop="copyrightInfoSetting">
                <el-select class="fromselect" v-model="form.copyrightInfoSetting" clearable filterable placeholder="请选择" value-key="id">
                  <el-option v-for="item in copyrightInfoSettings" :key="item.id" :label="item.title" :value="item" />
                </el-select>
              </el-form-item>

            </el-form>

          </el-col>
          <el-col :span="4">

            <span v-if="showFlag"><img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </span>
            <!-- <div slot="error"> -->
            <video v-if="!showFlag" :src="videoUrl" class="avatar" controls="controls">
              您的浏览器不支持视频播放
            </video>
            <!-- </div> -->
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">

          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="45" />
        <el-table-column prop="id" label="ID" width="45" />

        <el-table-column prop="title" label="网站" />
          <el-table-column prop="language" label="网站语言" >
                <template slot-scope="scope">
            {{ dict.label.language[scope.row.language] }}
          </template>
          </el-table-column>
        <el-table-column prop="productTitle" label="产品标题" />
        <el-table-column prop="messageTitle" label="消息标题" />
        <el-table-column prop="swiperSettingList" label="轮播图">
          <template slot-scope="scope"  show-overflow-tooltip>
            <el-tag v-for="(item,index ) in scope.row.swiperSettingList" style="margin:2px" :key="item.id" :type="tagType[index]">{{item.title}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productSettingList" label="产品列表"  show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-for="(item,index ) in scope.row.productSettingList" style="margin:2px" :key="item.id" :type="tagType[index]">{{item.title}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="messageSettingList" label="最新消息"  show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-for="(item,index ) in scope.row.messageSettingList" style="margin:2px" :key="item.id" :type="tagType[index]">{{item.title}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="tailModuleList" label="尾部信息"  show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-for="(item,index ) in scope.row.tailModuleList" style="margin:2px" :key="item.id" :type="tagType[index]">{{item.title}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="videoSetting" label="视频路径">
          <template slot-scope="{row}">

            <!-- <div slot="error"> -->
            <video v-if="row.videoSetting.videoUrl !=''" :src="row.videoSetting.videoUrl" class="rowavatar" controls="controls">
              您的浏览器不支持视频播放
            </video>
            <!-- </div> -->
          </template>
        </el-table-column>
        <el-table-column prop="copyrightInfoSetting.title" label="版权信息" />
        <!-- <el-table-column prop="createBy" label="创建者" />
              <el-table-column prop="createTime" label="创建日期" /> -->
        <el-table-column v-if="checkPer(['admin','webSetting:edit','webSetting:del'])" label="操作" width="200">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission">
              <el-popover :ref="scope.row.id" v-permission="['admin','webSetting:add']" placement="top" width="180" >
                <p>确定部署新配置吗？ 网页将被更新</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                  <el-button :loading="deployFlg" type="primary" size="mini" @click="deploy(scope.row)">确定</el-button>
                </div>

                <el-button slot="reference" v-permission="permission.add" size="mini" type="success" :icon="deployFlg?'el-icon-loading':'el-icon-video-play'" :loading="deployFlg" algin="left" />
              </el-popover>
            </udOperation>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudWebSetting from '@/api/webSetting'
import crudVideoSetting from '@/api/videoSetting'
import crudCopyrightInfoSetting from '@/api/copyrightInfoSetting'
import crudLogoSetting from '@/api/logoSetting'
import crudTailSetting from '@/api/tailSetting'
import crudMessageSetting from '@/api/messageSetting'
import crudProductSetting from '@/api/productSetting'
import crudSwiperSetting from '@/api/swiperSetting'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = { id: null,language:'0',host:null, productTitle: null, messageTitle: null, title: null, logo: null, linkType: '#', videoSetting: null, swiperSettingList: [], productSettingList: [], messageSettingList: [], tailModuleList: [], copyrightInfoSetting: {}, createBy: null, updateBy: null, createTime: null, updateTime: null }
export default {
  name: 'WebSetting',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],

  cruds() {
    return CRUD({ title: 'web配置', url: 'api/webSetting', idField: 'id', sort: 'id,desc', crudMethod: { ...crudWebSetting } })
  },
  // 数据字典
  dicts: ['web_setting', 'link_type', 'language'],
  data() {
    return {
      deployFlg: false,
      showFlag: true,
      imageUrl: null,
      videoUrl: null,
      logoSettings: [],
      swiperSettings: [],
      productSettings: [],
      messageSettings: [],
      tailSettings: [],
      copyrightInfoSettings: [],
      videoSettings: [],
      permission: {
        add: ['admin', 'webSetting:add'],
        edit: ['admin', 'webSetting:edit'],
        del: ['admin', 'webSetting:del']
      },
      rules: {
         host: [
          { required: true, message: '网站域名不能为空', trigger: 'blur' }
        ],
         language: [
          { required: true, message: '网站语言不能为空', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '网站标题不能为空', trigger: 'blur' }
        ],
        productTitle: [
          { required: true, message: '产品标题不能为空', trigger: 'blur' }
        ],
        messageTitle: [
          { required: true, message: '消息标题不能为空', trigger: 'blur' }
        ],
        logo: [
          { required: true, message: 'logo不能为空', trigger: 'blur' }
        ],
        swiperSettingList: [
          { required: true, message: '轮播图不能为空', trigger: 'blur' }
        ],
        videoSetting: [
          { required: true, message: '视频内容不能为空', trigger: 'blur' }
        ],
        productSettingList: [
          { required: true, message: '产品列表不能为空', trigger: 'blur' }
        ],
        messageSettingList: [
          { required: true, message: '最新消息不能为空', trigger: 'blur' }
        ],
        tailModuleList: [
          { required: true, message: '尾部信息不能为空', trigger: 'blur' }
        ],
        copyrightInfoSetting: [
          { required: true, message: '版权信息不能为空', trigger: 'blur' }
        ],

      },
      queryTypeOptions: [
        { key: 'title', display_name: '标题' },
        { key: 'context', display_name: '内容' }
      ],
      tagType: ['', 'success', 'success', 'info', 'danger', 'warning']
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    initData() {
      // logo数据
      crudLogoSetting.queryAll().then(res => {
        this.logoSettings = res
        console.log("res=", res)
        console.log("logoSettings=", this.logoSettings)
      }).catch(() => { });
      //轮播图
      crudSwiperSetting.queryAll().then(res => {
        this.swiperSettings = res
      }).catch(() => { });
      //视频数据
      crudVideoSetting.queryAll().then(res => {
        this.videoSettings = res
      }).catch(() => { });

      //产品数据
      crudProductSetting.queryAll().then(res => {
        this.productSettings = res
      }).catch(() => { });

      //消息数据
      crudMessageSetting.queryAll().then(res => {
        this.messageSettings = res
      }).catch(() => { });

      //尾部数据
      crudTailSetting.queryAllGroupByTitle().then(res => {
        this.tailSettings = res
      }).catch(() => { });

      //版权数据
      crudCopyrightInfoSetting.queryAll().then(res => {
        this.copyrightInfoSettings = res
      }).catch(() => { });
    },
    deploy(val) {
      this.deployFlg = true
      crudWebSetting.deploy(val).then(res => {
        console.log("res" + res)
        this.$notify({
          title: '提示',
          message: '部署成功 请查看网页',
          type: 'success',
          duration: 5000
        })
        this.deployFlg = false
        this.$refs[val.id].doClose()
      }).catch(() => {
            this.deployFlg = false
        this.$refs[val.id].doClose()
       });
    },
    showImage(val) {
      console.log("showImage=", val)
      this.imageUrl = val.imageUrl == undefined ? val.logoUrl : val.imageUrl;
      this.showFlag = true;
    },
    showVideo(val) {
      console.log("showVideo=", val)
      this.videoUrl = val.videoUrl;
      this.showFlag = false;
    },
    showMultipleImage(val) {
      console.log("showMultipleImage=", val)
      this.imageUrl = ''
      if (val.length != 0) {
        this.imageUrl = val[val.length - 1].imageUrl;
      }

      this.showFlag = true;
    }

  }
}
</script>

<style scoped>
.fromselect {
  width: 370px;
}

 ::v-deep .el-image__error,
.el-image__placeholder {
  background: none;
}

 ::v-deep .el-image-viewer__wrapper {
  top: 55px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 278px;
  height: 278px;
  display: block;
}

.rowavatar {
  width: 210px;
  height: 110px;
}
</style>
